﻿@*
    入职申请管理系统 - 基于Layui和.NET Core的前端实现
    功能：人员搜索、表格展示、分页查询、数据导出
*@
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入职申请管理系统</title>
    <!-- 引入Layui样式 -->
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .search-box {
            margin: 15px;
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,.05);
        }
        .page-container {
            margin: 15px;
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,.05);
        }
        .layui-table {
            margin-top: 0;
        }
        .layui-table thead tr {
            background-color: #f8f8f8;
        }
        .layui-btn {
            margin-left: 10px;
        }
        .status-tag {
            padding: 2px 8px;
            border-radius: 2px;
            font-size: 12px;
            display: inline-block;
        }
        .status-pass {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        .empty-data {
            text-align: center;
            padding: 30px 0;
            color: #999;
        }
        .empty-data i {
            font-size: 50px;
            color: #e0e0e0;
            margin-bottom: 10px;
        }
        .gender-tag {
            padding: 2px 8px;
            border-radius: 2px;
            font-size: 12px;
            display: inline-block;
        }
        .gender-male {
            background-color: #e3f2fd;
            color: #1976d2;
        }
        .gender-female {
            background-color: #e8f5e9;
            color: #43a047;
        }
        .layui-table th,
        .layui-table td {
            white-space: nowrap; /* 禁止换行，内容在一行显示 */
            text-overflow: ellipsis; /* 超出单元格宽度时显示省略号 */
            overflow: hidden; /* 隐藏超出部分内容 */
            vertical-align: middle; /* 垂直居中，可选 */
        }
        .page-container {
            overflow-x: auto; /* 关键：超出页面时显示水平滚动条 */
        }

        /* 可选：让滚动条更美观（适配webkit浏览器） */
        .page-container::-webkit-scrollbar {
            height: 8px;
        }
        .page-container::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body class="layui-bg-gray">
    <!-- 搜索区域 -->
    <div class="search-box">
        <div class="layui-form">
            <div class="layui-form-item" style="margin-bottom: 0;">
                <!-- <label class="layui-form-label">人员名称</label>
                <div  class="layui-form-item" style="width: 100px;">
                     <input id="personName" name="personName" /> 
                    <input type="text" id="personName" name="personName" placeholder="请输入人员名称" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
                     <input type="text" id="personName" name="personName" placeholder="请输入人员名称" lay-verify="required" autocomplete="off" class="layui-input" lay-affix="clear" > 
                    <input type="text" id="personName" name="personName" placeholder="请输入人员名称" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">面试官</label>
                <div class="layui-form-item" style="width: 100px;">
                     <input id="interviewPeople" name="interviewPeople" /> 
                    <input type="text" id="interviewPeople" name="interviewPeople" placeholder="请输入面试官" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
                     <input type="text" id="interviewPeople" name="interviewPeople" placeholder="请输入面试官" autocomplete="off" class="layui-input"> 
                </div> -->
                <!-- <label class="layui-form-label">人员名称</label>
                <div class="layui-input-inline" disable="false">
                    <input type="text" id="personName" name="personName" placeholder="请输入人员名称" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">面试官</label>
                <div class="layui-input-inline" disable="true">
                    <input type="text" id="interviewPeople" name="interviewPeople" placeholder="请输入面试官" autocomplete="off" class="layui-input">
                </div> -->
                <!-- <div class="layui-form-item" style="width: 600px;">
                    <div class="layui-inline" style="width: 250px;">
                    <label style="width: 100px;" class="layui-form-label">请输入人员名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="personName" id="personName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="width: 250px;">
                    <label style="width: 100px;" class="layui-form-label">请输入面试官</label>
                        <div class="layui-input-inline">
                            <input type="text" name="interviewPeople" id="interviewPeople" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div> -->
                    <!-- 人员名称 -->
                <div class="layui-inline"> 
                    <label class="layui-form-label">人员名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="personName" id="personName" placeholder="请输入人员名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 面试官 -->
                    <div class="layui-inline"> 
                    <label class="layui-form-label">面试官</label>
                        <div class="layui-input-inline">
                            <input type="text" name="interviewPeople" id="interviewPeople" placeholder="请输入面试官" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-input-block" style="margin-left: 105px;">
                    <button class="layui-btn" lay-submit lay-filter="searchForm">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" id="reset-btn">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                    <a href="javascript:;" class="layui-btn layui-btn-normal" id="exportBtn">
                        <i class="layui-icon layui-icon-download"></i> 导出
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据展示区域 -->
    <div class="page-container">
        <table class="layui-table" lay-size="lg">
            <thead>
                <tr>
                    <th  width="100">人员名称</th>
                    <th  width="120">联系电话</th>
                    <th  width="100">用户性别</th>
                    <th  width="100">定级</th>
                    <th  width="120">面试反馈</th>
                    <th  width="120">面试结果</th>
                    <th  width="100">面试次数</th>
                    <th  width="120">面试时间</th>
                    <th  width="120">面试官</th>
                </tr>
            </thead>
            <tbody id="tb">
                <!-- 数据通过JS动态渲染 -->
            </tbody>
        </table>

        <!-- 分页区域 -->
        <div id="pagination" style="text-align: right; margin-top: 20px;"></div>
    </div>

    <!-- 引入脚本 -->
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
        var layer, laypage;

        layui.use(['form', 'layer', 'laypage'], function() {
            var form = layui.form;
            layer = layui.layer;
            laypage = layui.laypage;
            
            // 添加输入框调试代码
            $('#personName').on('input', function(e) {
                console.log('人员名称输入框输入事件:', e.target.value);
            });
            $('#interviewPeople').on('input', function(e) {
                console.log('面试官输入框输入事件:', e.target.value);
            });
            
            // 分页参数
            var currentPage = 1;
            var pageSize = 10;
            var totalCount = 0;

            // 监听表单提交
            form.on('submit(searchForm)', function(data) {
                currentPage = 1; // 搜索后重置到第一页
                loadData();
                return false;
            });

            // 监听重置按钮点击事件
            $('#reset-btn').on('click', function() {
                $('input[name="personName"]').val('');
                $('input[name="interviewPeople"]').val('');
                // 如果您希望重置后立即重新搜索（显示所有数据），则调用loadData
                currentPage = 1;
                loadData();
            });

            // 初始化加载数据
            loadData();

            // 导出功能
            $('#exportBtn').click(function() {
                var personName = encodeURIComponent($('#personName').val().trim());
                var interviewPeople = encodeURIComponent($('#interviewPeople').val().trim());
                window.location.href = '/OnboardingApplication/Export?PersonName=' + personName + '&InterviewPeople=' + interviewPeople;
            });

            // 加载数据
            function loadData() {
                var personName = $('#personName').val().trim();
                var interviewPeople = $('#interviewPeople').val().trim();
                
                // 显示加载层
                var loadIndex = layer.load(1, {
                    shade: [0.3, '#fff']
                });

                $.ajax({
                    url: '/OnboardingApplication/QueryPaged',
                    type: 'GET',
                    data: {
                        PersonName: personName,
                        InterviewPeople: interviewPeople,
                        page: currentPage,
                        pageSize: pageSize
                    },
                    dataType: 'json',
                    success: function(res) {
                        console.log('wwwwww加载入职申请数据',res);
                        layer.close(loadIndex);
                        renderTable(res.items);
                        totalCount = res.totalCount;
                        renderPagination();
                    },
                    error: function(xhr, status, error) {
                        layer.close(loadIndex);
                        console.error('请求错误:', error);
                        layer.msg('加载数据失败', {icon: 2});
                        $('#tb').html(`
                            <tr>
                                <td colspan="9" class="empty-data">
                                    <i class="layui-icon layui-icon-face-cry"></i>
                                    <p>加载失败</p>
                                </td>
                            </tr>
                        `);
                    }
                });
            }

            // 渲染表格
            function renderTable(data) {
                $('#tb').empty();
                
                if (data && data.length > 0) {
                    var html = '';
                    data.forEach(function(item) {
                        // 面试结果样式
                        var resultClass = 'status-pass'; // 默认通过状态
                        var resultText = item.interviewResult || '未知';
                        
                        if (resultText.includes('不通过') || resultText.includes('拒绝')) {
                            resultClass = 'status-fail';
                        } else if (resultText.includes('待') || resultText.includes('进行中')) {
                            resultClass = 'status-pending';
                        }
                        
                        // 性别样式
                        var genderClass = item.sex === 1 ? 'gender-male' : 'gender-female';
                        var genderText = item.sex === 1 ? '男' : (item.sex === 0 ? '女' : '未知');
                        
                        html += `
                            <tr>
                                <td>${item.personName || ''}</td>
                                <td>${formatPhone(item.phone) || ''}</td>
                                <td><span class="gender-tag ${genderClass}">${genderText}</span></td>
                                <td>${item.gradingMatch || ''}</td>
                                <td>${item.interviewFeedback || ''}</td>
                                <td><span class="status-tag ${resultClass}">${resultText}</span></td>
                                <td>${item.interviewNumber || 0}</td>
                                <td>${formatDate(item.interviewTime) || ''}</td>
                                <td>${item.interviewPeople || ''}</td>
                            </tr>
                        `;
                    });
                    $('#tb').html(html);
                } else {
                    $('#tb').html(`
                        <tr>
                            <td colspan="9" class="empty-data">
                                <i class="layui-icon layui-icon-face-cry"></i>
                                <p>暂无数据</p>
                            </td>
                        </tr>
                    `);
                }
            }

            // 渲染分页
            function renderPagination() {
                laypage.render({
                    elem: 'pagination',
                    count: totalCount,
                    limit: pageSize,
                    curr: currentPage,
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    jump: function(obj, first) {
                        if (!first) {
                            currentPage = obj.curr;
                            pageSize = obj.limit;
                            loadData();
                        }
                    }
                });
            }

            // 格式化日期
            function formatDate(dateTimeStr) {
                if (!dateTimeStr) return '';
                try {
                    var date = new Date(dateTimeStr);
                    if (isNaN(date.getTime())) return dateTimeStr;
                    
                    return date.getFullYear() + '-' + 
                           padZero(date.getMonth() + 1) + '-' + 
                           padZero(date.getDate());
                } catch (error) {
                    console.error('日期格式化错误:', error);
                    return dateTimeStr;
                }
            }

            // 格式化电话号码
            function formatPhone(phone) {
                if (!phone) return '';
                return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
            }

            // 数字补零
            function padZero(num) {
                return num < 10 ? '0' + num : num;
            }
        });
</script>
</body>
</html>